
<?php if(!$metodo): ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/modules/exporting.js"></script>
<?php endif; ?>


<div style="margin-top: 20px; margin-left: 150px; background: #f6f6f6;color:#006cb7; border-radius:10px; padding: 20px; width: 50px">
<div style="font-weight: bold; font-size: 24px;"><?php echo (int)($puntajeFinal);?></div>
</div>

<?php if($metodo): ?>

<script>
    //$(document.ready(function(){
        window.parent.alertar("<?php echo (int)($puntajeFinal);?>");
    //}));
</script>


<?php else: ?>

<script type="text/javascript">

var someData = [180,900];
var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'containerChart',
         defaultSeriesType: 'line',
         width: 350,
         height: 250,
         plotBorderWidth: 1
      },
      title: {
         text: "",
         x: -60 //center
      },
      exporting: {
          enabled: false
      },
      credits: {
        enabled: false
      },
      xAxis: {
         title: {
            text: 'Nota'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#006cb7',
            tickInterval: 50
         }]
      },
        plotOptions: {
        series: {
            marker: {
                lineColor: null,
                states: {
                    hover: {
                        fillColor: 'white',
                        lineWidth: 2
                    }
                }
            }
        }
      },

      yAxis: {
         min: 180,
         max: 900,
                 tickInterval: 150,



         title: {
            text: 'Puntaje Ranking'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#006cb7'
         }]
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.point.name +'</b><br/>' +
               this.x +': '+ this.y +' puntos';
         }
      },
      legend: {
         enabled: false
      },
      series: [{
        lineColor: 'red',
         data: [
             {
                name: 'Minimo de aprobación',
                color: '#006cb7',
                y: 213,
                x: 4

             },
            {
                name: 'Minimo del colegio',
                color: '#006cb7',
                y: 213,
                x: <?php echo number_format($minColegio,2) ?>
            },
        ]
      }
    ],
    series: [{

         data: [
             {
                name: 'Minimo de aprobación',
                color: '#006cb7',
                y: 213,
                x: 4

             },
            {
                name: 'Minimo del colegio',
                color: '#006cb7',
                y: 213,
                x: <?php echo number_format($minColegio,2) ?>
            },
            {
                name: 'Promedio del colegio',
                color: '#006cb7',
                y: 500,
                x:  <?php echo number_format($promedioColegio,2) ?>
            },
            {
                name: 'Tu ranking',
                color: 'red',
                id: 'punto_puntaje',
                y: <?php echo (int)($puntajeFinal) ?>,
                x: <?php echo number_format($promedioEstudiante,2) ?>,
                marker: {

                fillColor: 'red',
                lineColor: null,
                states: {
                    hover: {
                        fillColor: 'white',
                        lineWidth: 2,
                        lineColor: 'red'
                    }
                }
            }
            },
            {
                name: 'Maximo del colegio',
                color: '#006cb7',
                y: 850,
                x: <?php echo number_format($maxColegio,2) ?>
            },
            {
                name: 'Maximo obtenible',
                color: '#006cb7',
                y: 850,
                x: 7
            }


]
      }
    ]
   });


});

chart.get('punto_puntaje');

</script>


<div id="containerChart" style="height: 265px; width: 500px; padding: 10px"></div>
<style type="text/css">
.highcharts-title
    {
        font-size: 8px;
    }
</style>
<?php endif; ?>